<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <ul class="list">
            123123123
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <!-- <li class="last">06</li> -->
        </ul>
    </div>
</body>
<script>

    // DOM节点之层级查找

    // DOM节点(文档节点 元素节点 属性节点 文本节点 注释节点) 

    // 节点查找  元素查找
    // 父节点   父元素
    // 子节点   子元素
    // 同胞节点 同级元素

    // 节点查找 -> 范围比较大 
    // 元素查找 -> 限制查询的类型为元素节点

    var ul = document.querySelector(".list");
    var mid = document.querySelector(".mid");


    // 父节点  父元素  (一般能作为父节点的主要是元素节点 文档节点)
    // Node.parentNode   父节点
    // Node.parentElement  父元素

    // console.log(ul.parentNode);   // ul的父节点 -> wrap
    // console.log(ul.parentNode.parentNode);   // ul的父节点的父节点 -> wrap的父节点 -> body
    // console.log(ul.parentNode.parentNode.parentNode);   // body的父节点 -> html
    // console.log(ul.parentNode.parentNode.parentNode.parentNode);   // html的父节点 -> document

    // console.log(ul.parentElement);   // ul的父元素 -> wrap
    // console.log(ul.parentElement.parentElement);   //  wrap的父元素 -> body
    // console.log(ul.parentElement.parentElement.parentElement);   // body的父元素 -> html
    // console.log(ul.parentElement.parentElement.parentElement.parentElement);   // html的父元素 -> null


    // 子节点  子元素
    // Node.childNodes  获取匹配节点的子节点
    // Node.children    获取匹配节点的子元素

    console.log(ul.childNodes);
    console.log(ul.children);
    
    // console.log(ul.childNodes[0]);
    // console.log(ul.childNodes[11]);

    // ul.childNodes[0].nodeValue="abcabcabc"
    // ul.childNodes[11].nodeValue="注释已被修改"

    // 第一个 子节点 / 子元素
    // Node.firstChild           第一个 子节点    
    // Node.firstElementChild    第一个  子元素
    // console.log(ul.firstChild);
    // console.log(ul.firstElementChild);

    // 最后一个 子节点 / 子元素
    // Node.lastChild           最后一个 子节点    
    // Node.lastElementChild    最后一个  子元素
    // console.log(ul.lastChild);
    // console.log(ul.lastElementChild);


    // 同胞节点 / 同级元素      previous先前的 早先的    sibling(同胞 兄弟 姐妹)

    // 前一个 同胞节点 / 同级元素
    // console.log(mid.previousSibling);
    // console.log(mid.previousSibling.previousSibling);

    // console.log(mid.previousElementSibling);
    // console.log(mid.previousElementSibling.previousElementSibling);


    // 后一个 同胞节点 / 同级元素
    // console.log(mid.nextSibling);
    // console.log(mid.nextSibling.nextSibling);

    console.log(mid.nextElementSibling);
    console.log(mid.nextElementSibling.nextElementSibling);




</script>
</html>